import { saveAuthInfo, getAuthInfo, getDashboardData } from './erpapi';
import { COOKIE_NAMES } from './defines';
import { createApp } from 'vue';
import KikimamiDashboardPanel from '../components/KikimamiDashboardPanel.vue';

// 类型声明
type AuthInfo = {
    authorization: string;
    ptoken: string;
    account_id?: string;
};

// 获取 Cookie 值的辅助函数
function getCookie(name: string): string | null {
    const cookies = document.cookie.split(';');
    for (let cookie of cookies) {
        const [cookieName, cookieValue] = cookie.trim().split('=');
        if (cookieName === name) {
            return cookieValue;
        }
    }
    console.warn(`未找到 Cookie: ${name}`);
    return null;
}

// 检查并更新认证信息
async function checkAndUpdateAuth(): Promise<void> {
    console.log('开始检查认证信息...');
    console.log('当前所有 cookies:', document.cookie);

    const auth = getCookie(COOKIE_NAMES.AUTH_TOKEN);
    const ptoken = getCookie(COOKIE_NAMES.PROJECT_TOKEN);

    console.log('当前获取到的认证信息:', { auth, ptoken });

    if (auth && ptoken) {
        // 获取当前存储的认证信息进行对比
        const currentAuth = await getAuthInfo();
        console.log('当前存储的认证信息:', currentAuth);

        if (auth !== currentAuth.authorization || ptoken !== currentAuth.ptoken) {
            console.log('检测到认证信息变更，开始更新...');
            try {
                await saveAuthInfo(auth, ptoken);
                console.log('新的认证信息保存成功');

                // 验证保存的信息
                const savedInfo = await getAuthInfo();
                console.log('验证新保存的认证信息:', savedInfo);
            } catch (error) {
                console.error('保存认证信息时出错:', error);
            }
        } else {
            console.log('认证信息未发生变化，无需更新');
        }
    } else {
        console.warn('未找到认证信息 Cookie');
    }
}

// 创建 Kikimami 看板按钮
export function createKikimamiDashboardButton(): HTMLElement {
  // 创建按钮容器
  const buttonContainer = document.createElement('div');
  buttonContainer.className = 'kikimami-dashboard-button-container';
  buttonContainer.style.display = 'inline-block';
  buttonContainer.style.margin = '0 10px';
  buttonContainer.style.position = 'relative';
  buttonContainer.style.zIndex = '9999';
  
  // 创建按钮元素
  const button = document.createElement('button');
  button.setAttribute('role', 'button');
  button.setAttribute('tabindex', '0');
  button.className = 'kikimami-dashboard-button';
  button.setAttribute('title', 'Kikimami 看板');
  button.setAttribute('aria-label', 'Kikimami 看板');
  button.id = 'kikimami-dashboard-button';
  
  // 设置按钮样式，使其更加明显
  button.style.backgroundColor = '#ff6b6b'; // 更鲜艳的颜色
  button.style.color = 'white';
  button.style.border = 'none';
  button.style.padding = '10px 20px'; // 更大的按钮
  button.style.borderRadius = '6px';
  button.style.cursor = 'pointer';
  button.style.display = 'flex';
  button.style.alignItems = 'center';
  button.style.justifyContent = 'center';
  button.style.fontWeight = 'bold';
  button.style.fontSize = '14px'; // 更大的字体
  button.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)'; // 更明显的阴影
  button.style.transition = 'all 0.3s ease'; // 添加过渡效果
  
  // 添加悬停效果
  button.onmouseover = () => {
    button.style.backgroundColor = '#ff8787'; // 悬停时颜色变化
    button.style.transform = 'translateY(-2px)'; // 悬停时轻微上浮
    button.style.boxShadow = '0 6px 12px rgba(0,0,0,0.3)'; // 悬停时阴影增强
  };
  
  button.onmouseout = () => {
    button.style.backgroundColor = '#ff6b6b';
    button.style.transform = 'translateY(0)';
    button.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
  };
  
  // 创建图标容器
  const iconSpan = document.createElement('span');
  iconSpan.style.marginRight = '8px';
  
  // 创建SVG图标
  const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svgIcon.setAttribute('viewBox', '0 0 24 24');
  svgIcon.setAttribute('height', '18'); // 更大的图标
  svgIcon.setAttribute('width', '18');
  svgIcon.setAttribute('fill', 'white');
  
  // 添加SVG路径 - 看板图标
  const paths = [
    'M3 5C3 3.89543 3.89543 3 5 3H9C10.1046 3 11 3.89543 11 5V9C11 10.1046 10.1046 11 9 11H5C3.89543 11 3 10.1046 3 9V5ZM5 5H9V9H5V5Z',
    'M13 5C13 3.89543 13.8954 3 15 3H19C20.1046 3 21 3.89543 21 5V9C21 10.1046 20.1046 11 19 11H15C13.8954 11 13 10.1046 13 9V5ZM15 5H19V9H15V5Z',
    'M13 15C13 13.8954 13.8954 13 15 13H19C20.1046 13 21 13.8954 21 15V19C21 20.1046 20.1046 21 19 21H15C13.8954 21 13 20.1046 13 19V15ZM15 15H19V19H15V15Z',
    'M3 15C3 13.8954 3.89543 13 5 13H9C10.1046 13 11 13.8954 11 15V19C11 20.1046 10.1046 21 9 21H5C3.89543 21 3 20.1046 3 19V15ZM5 15H9V19H5V15Z'
  ];
  
  paths.forEach(d => {
    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttribute('fill-rule', 'evenodd');
    path.setAttribute('clip-rule', 'evenodd');
    path.setAttribute('d', d);
    path.setAttribute('fill', 'currentColor');
    svgIcon.appendChild(path);
  });
  
  // 添加按钮文本
  const buttonText = document.createElement('span');
  buttonText.textContent = 'Kikimami 看板';
  
  // 组装按钮
  iconSpan.appendChild(svgIcon);
  button.appendChild(iconSpan);
  //button.appendChild(buttonText);
  buttonContainer.appendChild(button);
  
  // 添加点击事件，确保按钮可点击
  button.addEventListener('click', (e) => {
    console.log('Kikimami 看板按钮被直接点击');
    const event = new CustomEvent('kikimamiDashboardButtonClicked');
    document.dispatchEvent(event);
    
    // 打开看板面板
    openKikimamiDashboardPanel();
    
    e.preventDefault();
    e.stopPropagation();
  });
  
  return buttonContainer;
}

// 插入 Kikimami 看板按钮
export function insertKikimamiDashboardButton(): boolean {
  // 尝试多种可能的选择器来查找 ERP 系统的导航栏或工具栏
  const possibleSelectors = [
    '.ant-layout-header',
    'header',
    '.header',
    '.navbar',
    '.nav-bar',
    '.top-bar',
    '.toolbar',
    '.app-header',
    '#header',
    '.main-header'
  ];
  
  let toolbar = null;
  
  // 尝试所有可能的选择器
  for (const selector of possibleSelectors) {
    const element = document.querySelector(selector);
    if (element) {
      console.log(`找到工具栏元素，使用选择器: ${selector}`);
      toolbar = element;
      break;
    }
  }
  
  // 如果没有找到任何匹配的元素，尝试使用 body 作为后备选项
  if (!toolbar) {
    console.log('未找到特定的工具栏元素，使用 body 作为后备选项');
    toolbar = document.body;
  }

  // 检查是否已经存在 Kikimami 看板按钮
  if (document.getElementById('kikimami-dashboard-button')) {
    console.log('Kikimami 看板按钮已存在');
    return true;
  }

  // // 创建 Kikimami 看板按钮
  // const dashboardButton = createKikimamiDashboardButton();
  //
  // // 在工具栏中插入 Kikimami 看板按钮
  // // 如果是 body，则添加到顶部
  // if (toolbar === document.body) {
  //   // 创建一个固定在顶部的容器
  //   const fixedContainer = document.createElement('div');
  //   fixedContainer.style.position = 'fixed';
  //   fixedContainer.style.top = '10px';
  //   fixedContainer.style.right = '10px';
  //   fixedContainer.style.zIndex = '9999';
  //
  //   fixedContainer.appendChild(dashboardButton);
  //   toolbar.appendChild(fixedContainer);
  // } else {
  //   // 正常添加到工具栏
  //   toolbar.appendChild(dashboardButton);
  // }
  
  console.log('Kikimami 看板按钮已成功插入');
  return true;
}

// 设置 Kikimami 看板按钮的点击事件处理
export function setupKikimamiDashboardButtonClickHandler() {
  document.addEventListener('click', (e: MouseEvent) => {
    // 确保e.target不为null并且是Element类型
    if (e.target && e.target instanceof Element) {
      const button = e.target.closest('#kikimami-dashboard-button');
      if (button) {
        // 触发自定义事件，便于外部处理
        const event = new CustomEvent('kikimamiDashboardButtonClicked');
        document.dispatchEvent(event);
        
        // 打开看板面板
        openKikimamiDashboardPanel();
        
        e.preventDefault();
        e.stopPropagation();
      }
    }
  }, true);
}

// 打开 Kikimami 看板面板
export function openKikimamiDashboardPanel() {
  // 检查是否已存在面板
  let dashboardPanel = document.getElementById('kikimami-dashboard-panel');
  if (dashboardPanel) {
    // 如果已存在，则通过Vue实例控制显示/隐藏
    const vueInstance = (dashboardPanel as any).__vue_app__;
    if (vueInstance) {
      const componentInstance = vueInstance._instance.proxy;
      componentInstance.show();
    }
    return;
  }
  
  // 创建挂载点
  const mountEl = document.createElement('div');
  mountEl.id = 'kikimami-dashboard-mount';
  document.body.appendChild(mountEl);
  
  // 创建Vue应用并挂载组件
  const app = createApp(KikimamiDashboardPanel);
  const vm = app.mount(mountEl);
  
  // 保存Vue实例到DOM元素，以便后续访问
  const panelEl = document.getElementById('kikimami-dashboard-panel');
  if (panelEl) {
    (panelEl as any).__vue_app__ = app;
  }
  
  // 显示面板
  (vm as any).show();
}

// 主函数：初始化 ERP 处理器
export function erpHandler(): () => void {
  console.log('ERP Handler 初始化');
  
  // 创建一个标志，用于跟踪是否已经初始化
  let isInitialized = false;
  let intervalId: NodeJS.Timeout | undefined;
  let observer: MutationObserver | undefined;
  
  // 清理函数
  const cleanup = () => {
    console.log('执行清理操作...');
    if (observer) {
      observer.disconnect();
      observer = undefined;
    }
    if (intervalId) {
      clearInterval(intervalId);
      intervalId = undefined;
    }
  };
  
  const initialize = async () => {
    // 如果已经初始化，则不再重复执行
    if (isInitialized) {
      console.log('ERP Handler 已经初始化，跳过');
      return;
    }
    
    console.log('初始化 ERP Handler');
    
    // 检查按钮是否已存在
    const buttonExists = () => {
      const button = document.getElementById('kikimami-dashboard-button');
      return !!button;
    };
    
    // 如果按钮已存在，直接返回
    if (buttonExists()) {
      console.log('Kikimami 看板按钮已存在，无需重新初始化');
      isInitialized = true;
      cleanup();
      return;
    }
    
    // 监听 kikimamiDashboardButton-clicked 事件
    document.addEventListener('kikimamiDashboardButtonClicked', () => {
      console.log('Kikimami 看板按钮被点击');
    });
    
    // 设置 Kikimami 看板按钮的点击事件处理
    setupKikimamiDashboardButtonClickHandler();
    
    // 初始尝试插入 Kikimami 看板按钮
    const initializeUI = () => {
      if (isInitialized) {
        cleanup();
        return;
      }
      
      const result = insertKikimamiDashboardButton();
      console.log('尝试插入按钮');
      
      // 如果按钮已成功插入，清理定时器和观察者
      if (result) {
        console.log('按钮插入成功，停止后续检查');
        isInitialized = true;
        cleanup();
      }
    };
    
    // 立即尝试初始化一次
    initializeUI();
    
    // 如果还没初始化成功，设置延迟尝试
    if (!isInitialized) {
      // 1秒后再次尝试初始化
      setTimeout(() => {
        if (!isInitialized) initializeUI();
      }, 1000);
      
      // 3秒后再次尝试初始化
      setTimeout(() => {
        if (!isInitialized) initializeUI();
      }, 3000);
      
      // 每10秒尝试一次，直到成功
      intervalId = setInterval(() => {
        if (isInitialized) {
          cleanup();
        } else {
          initializeUI();
        }
      }, 10000);
      
      // 设置 DOM 观察者
      observer = new MutationObserver((mutations) => {
        if (isInitialized) {
          cleanup();
          return;
        }
        
        const result = insertKikimamiDashboardButton();
        if (result) {
          console.log('通过DOM观察检测到按钮插入成功');
          isInitialized = true;
          cleanup();
        }
      });
      
      // 开始观察 document.body
      observer.observe(document.body, {
        childList: true,
        subtree: true
      });
    }
  };
  
  // 尝试多种方式确保初始化函数被调用
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initialize);
  } else {
    initialize();
  }
  
  window.addEventListener('load', () => {
    if (!isInitialized) initialize();
  });
  
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible' && !isInitialized) {
      initialize();
    }
  });

  // 返回清理函数
  return cleanup;
}

// 导出用于测试的函数
export const __test__ = {
    getCookie,
    checkAndUpdateAuth
}; 